<template>
    <div class="app-container">
        <div>
            <p><b class="p">车辆信息</b></p>
            <el-form :model="inputModel" :inline="true" :rules="rules" class="form1">
                <el-form-item label="车牌号:" prop="plateNumber">
                    <el-input style="width:2.2rem" v-model="inputModel.plateNumber" placeholder="" :disabled="isEdit">
                    </el-input>
                </el-form-item>
                <el-form-item class="interval-left" label="车牌颜色:" prop="plateColor">
                    <el-select style="width:2.2rem" v-model="inputModel.plateColor" placeholder="请选择" :disabled="isEdit">
                        <el-option v-for="item in plateColorMenu" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="interval-left" label="车辆类型:" prop="carType">
                    <el-select style="width:2.2rem" v-model="inputModel.carType" placeholder="请选择" :disabled="isEdit">
                        <el-option v-for="item in carTypeMenu" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form :model="inputModel" :inline="true" :rules="rules" class="form2">
                <el-form-item label="司机姓名:" prop="driverName">
                    <el-input style="width:2.2rem" v-model="inputModel.driverName" placeholder="" :disabled="isEdit">
                    </el-input>
                </el-form-item>
                <el-form-item class="interval-left" label="司机电话:" prop="driverTel">
                    <el-input style="width:2.2rem" v-model="inputModel.driverTel" placeholder="" :disabled="isEdit">
                    </el-input>
                </el-form-item>
                <el-form-item class="interval-left" label="身份证号:" prop="driverIDNumber">
                    <el-input style="width:2.2rem" v-model="inputModel.driverIDNumber" placeholder="" :disabled="isEdit">
                    </el-input>
                </el-form-item>
            </el-form>
            <el-form :model="inputModel" :inline="true" :rules="rules" class="form2">
                <el-form-item label="车辆类别:" prop="carCategory">
                    <el-select v-model="inputModel.carCategory" placeholder="请选择" :disabled="isEdit">
                        <el-option v-for="item in carCategoryMenu" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="interval-left" label="启用状态:" prop="delivery" :disabled="isEdit">
                    <el-switch v-model="inputModel.delivery"></el-switch>
                </el-form-item>
            </el-form>
            <el-form :model="inputModel" :inline="true" :rules="rules" class="form2">
                <el-form-item style="margin-left: .2rem;" label="备注:">
                    <el-input style="width: 9.5rem;" type="textarea" :rows="1" placeholder="请输入内容"
                        v-model="inputModel.remarks" :disabled="isEdit">
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button style="margin-left:9rem;" type="primary" @click="next">{{ isEdit ? "编辑" : "提交" }}</el-button>
            <el-button @click="back">取消</el-button>
        </div>
        <div>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="通行权限" name="first">
                    <el-button style="margin-bottom:20px;margin-left: .1rem;" type="primary" size="small"
                        @click="handleEdit">新增通行权限</el-button>
                    <el-table v-loading='listLoading' :data='list' element-loading-text='Loading' border fit
                        highlight-current-row>
                        <el-table-column align='center' type="index" width="40">
                        </el-table-column>
                        <el-table-column label='权限来源' width='120' align='center'>
                            <template slot-scope='scope'>
                                <span type="primary">{{
                                    }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label='有效期起' width='180' align='center'>
                            <template slot-scope='scope'>
                                <span>{{ scope.row.startTime }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label='有效期止' width='180' align='center'>
                            <template slot-scope='scope'>
                                {{ scope.row.endTime }}
                            </template>
                        </el-table-column>
                        <el-table-column align='center' prop='created_at1' label='通行次数' width='100'>
                            <template slot-scope='scope'>
                                <span>{{ scope.row.passesNumberType ? scope.row.passesNumber : "不限" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column class-name='status-col' label='可通行门禁' width='120' align='center'>
                            <template slot-scope='scope'>
                                <span>{{ scope.row.accesses }}</span>
                                <!-- <span>{{ scope.row.endDateTime }}</span> -->
                            </template>
                        </el-table-column>
                        <el-table-column align='center' prop='created_at' label='通行方向' width='120'>
                            <template slot-scope='scope'>
                                <!-- <span>{{  }}</span> -->
                                <!-- <span>{{ scope.row.creater }}</span> -->
                            </template>
                        </el-table-column>
                        <el-table-column align='center' prop='created_at' label='权限状态' width='120'>
                            <template slot-scope='scope'>
                                <span>{{ scope.row.state ? "有效" : "失效" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align='center' prop='created_at' label='启用状态' width='120'>
                            <template slot-scope='scope'>
                                <span>{{ scope.row.enabledMark ? "启用" : "禁用" }}</span>
                                <!-- <span>{{ scope.row.CreateTime }}</span> -->
                            </template>
                        </el-table-column>
                        <el-table-column align='center' prop='created_at' label='创建人' width='120'>
                            <template slot-scope='scope'>
                                <span>{{ scope.row.creatorId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align='center' prop='created_at' label='创建时间' width='240'>
                            <template slot-scope='scope'>
                                <i class='el-icon-time' />
                                <span>{{ scope.row.creationTime }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align='center' prop='created_at' label='操作' width='160'>
                            <template slot-scope='scope'>
                                <el-button size='mini' type='danger'
                                    @click='handleDelete(scope.$index, scope.row)'>禁用</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-dialog title="新增权限" width="45%" :visible.sync="openDialog">
                        <div style="width: 7rem;margin-top: -1rem;">
                            <addVehiclePower ref="addVehiclePower" :elsteps="elsteps"
                                :elsplateNumber="checkList.plateNumber" :appClass="appClass" @backMain="backMain">
                            </addVehiclePower>
                        </div>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane style="height: .5rem" label="通行明细" name="second">
                    <div style="margin-top: -.9rem;">
                        <accessDetails ref="accessDetails" :isFalse="isFalse" :plateNumber="checkList.plateNumber">
                        </accessDetails>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>

import addVehiclePower from "./addVehiclePower";
import accessDetails from "./accessDetails";
import { getApiObtainCar, updateApiCar } from "@/api/Car";
import { getApiCarAuthorizeList, postApiCarAuthorizeModify } from "@/api/CarAuthorize";
import { parseTime } from "@/utils";

export default {
    components: { addVehiclePower, accessDetails },
    data() {
        return {
            isFalse: false,
            listLoading: false,
            activeName: 'first',
            isEdit: true,
            elsteps: false,
            appClass: "",
            active: 0,
            checkList: [],
            inputModel: {
                id: '',
                plateNumber: '',
                plateColor: '',
                carType: '',
                driverName: '',
                driverTel: '',
                driverIDNumber: '',
                carCategory: '',
                delivery: true,
                remarks: ''
            },
            dailogInputModel: {
                resource: {},
                validFrom: '',
                expiryDate: '',
                lifeSpan: '',
                passesNumberList: {},
                passesNumber: '',
                leaveAccess: '',
                enterAccess: '',
                searchName: '',
            },
            currentPage: 1,
            pageSize: 5,
            dialogFormVisible: false,
            openDialog: false,
            plateColorMenu: [{ value: -1, label: '请选择' }, { value: 0, label: '黄色' }, { value: 1, label: '蓝色' }, { value: 2, label: '绿色' }],
            carTypeMenu: [{ value: 0, label: '请选择' }, { value: 1, label: '小车' }, { value: 2, label: '大车' }],
            carCategoryMenu: [{ value: 0, label: '请选择' }, { value: 1, label: '固定车' }, { value: 2, label: '临时车' }],
            rules: {
                plateNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
                plateColor: [{ required: true, message: '请选择车牌颜色', trigger: 'blur' }],
                carType: [{ required: true, message: '请选择车牌类型', trigger: 'blur' }],
                driverName: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
                driverTel: [{ required: true, message: '请输入司机电话', trigger: 'blur' }],
                carCategory: [{ required: true, message: '请选择车辆类别', trigger: 'blur' }],
                delivery: [{ required: true, trigger: 'blur' }]
            },
            list: [],
        }
    },
    created() {
        this.checkList = this.$route.query.checkList;
        this.initializationData();
    },
    methods: {
        initializationData() {
            console.log(this.checkList)
            let data = {
                plateNumber: this.checkList.plateNumber,
                skipCount: ((this.currentPage <= 1 ? 1 : this.currentPage) - 1) * this.pageSize,
                MaxResultCount: this.pageSize,
            }
            console.log(data)
            getApiObtainCar(this.checkList.id).then(res => {
                this.inputModel.id = res.id;
                this.inputModel.plateNumber = res.plateNumber;
                this.inputModel.plateColor = res.plateColor;
                this.inputModel.carType = res.carType;
                this.inputModel.driverName = res.driverName;
                this.inputModel.driverTel = res.driverTel;
                this.inputModel.carCategory = res.carCategory;
                this.inputModel.delivery = res.state == 1 ? true : false;
                this.inputModel.driverIDNumber = res.driverIDNumber;
                this.inputModel.remarks = res.remarks;
            });
            getApiCarAuthorizeList(this.checkList).then(res => {
                this.list = res.items;
                this.list.forEach(element => {
                    element.creationTime = parseTime(new Date(element.creationTime), '{y}-{m}-{d} {h}:{i}:{s}');
                    element.startTime = parseTime(new Date(element.startTime), '{y}-{m}-{d} {h}:{i}:{s}');
                    element.endTime = parseTime(new Date(element.endTime), '{y}-{m}-{d} {h}:{i}:{s}');
                });
                console.log(this.list);
            });
        },
        handleClick(tab, event) {
        },
        next() {
            if (this.isEdit) {
                this.isEdit = false;
            } else {
                this.isEdit = true;
                let data = {
                    id: this.inputModel.id,
                    plateNumber: this.inputModel.plateNumber,
                    plateColor: this.inputModel.plateColor,
                    carCategory: this.inputModel.carCategory,
                    carType: this.inputModel.carType,
                    driverName: this.inputModel.driverName,
                    driverTel: this.inputModel.driverTel,
                    driverIDNumber: this.inputModel.driverIDNumber,
                    state: this.inputModel.delivery ? 1 : 0,
                    remarks: this.inputModel.remarks,
                }
                console.log(data);
                updateApiCar(data).then(res => {
                    this.$message.success("修改成功！")
                });
            }
        },
        back() {
            this.$router.push({
                path: "vehicleManagement",
            });
        },
        backMain() {
            this.openDialog = false;
            this.initializationData();
        },
        handleDownload() {

        },
        handleEdit() {
            this.openDialog = true;
        },
        handleDelete(v, row) {
            this.$confirm('此操作将该权限, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = {
                    id: row.id,
                    enabledMark: 0,
                }
                console.log(data);
                postApiCarAuthorizeModify(data).then(res => {
                    this.initializationData();
                    this.$message({
                        type: 'success',
                        message: '禁用成功!'
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消禁用'
                });
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.main {
    margin: 0.2rem;
    padding: 0.2rem;
}

.form1 {
    margin-top: .3rem;
    margin-left: .4rem;
}

.form2 {
    margin-top: 0.2rem;
    margin-left: .3rem;
}

.interval-left {
    margin-left: .4rem;
}

.p {
    font-size: 23px;
}

.search-bar {
    margin-bottom: .2rem;
    margin-left: 5%;
    margin-top: .9rem;
}
</style>
